<template>
    <div class="editTopology">
        <a-modal
            v-model:open="open"
            :title="title"
            width="100%"
            wrapClassName="editTopologyModal"
            :footer="null"
            :destroyOnClose="true"
            :closable="false"
            :keyboard="false"
            :maskClosable="false"
        >
            <TopologyIndex
                @handleOk="handleOk"
                @handleCancel="handleCancel"
                :topologyId="topologyList.id"
                :jsonContent="topologyList.jsonContent"
            />
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
    import { ref, h } from 'vue';
    import { storeToRefs } from 'pinia';
    import { useCanvasStore } from '@/store/canvas';
    import { message, Modal } from 'ant-design-vue';
    import { QuestionCircleOutlined} from '@ant-design/icons-vue';
    import { MAddTopologyConfigState } from '@/utils/interface';
    import { SaveTopologyConfiguration } from '@/api/index';
    import TopologyIndex from '@/views/topology/index.vue';


    const emit = defineEmits<{
        (event: 'loadConfigListsFun'): void
    }>();
    const canvasStore = useCanvasStore();
    const { meta2dDatas } = storeToRefs(canvasStore);

    const open = ref(false);
    const title = ref<string>('编辑组态');
    const topologyList = ref<any>({});

    const showModal = (record: any) => {
        topologyList.value = record;
        meta2dDatas.value = null
        open.value = true;
    }

    const handleOk = async () => {
        console.log("handleOk", meta2dDatas.value);
        // open.value = false;
        const _params: MAddTopologyConfigState = {
            topologyId: topologyList.value.id,
            jsonContent: JSON.stringify(meta2dDatas.value),
        };
        const res = await SaveTopologyConfiguration(_params);
        if(res) {
            if(res.code === 1000) {
                message.success(res.data);
                emit("loadConfigListsFun");
                open.value = false;
            } else {
                message.error(res.msg);
            }
        }
    }
    const handleCancel = () => {
        Modal.confirm({
          title: '提示',
          icon: h(QuestionCircleOutlined),
          content: '关闭弹窗当前拓扑操作会丢失，是否确认?',
          okText: '确定',
          onOk() {
            open.value = false;
          },
          onCancel() {
            message.warning('取消操作！');
          },
        });
    }

     defineExpose({ showModal });
</script>

<style lang="scss">
.editTopologyModal {
    .ant-modal {
        max-width: 100%;
        position: relative;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }
    .ant-modal-header {
        margin-bottom: 0;
    }
    .ant-modal-close {
        position: absolute;
        top: 10px;
    }
    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
        padding: 10px 0 0 0;
        .ant-modal-header,
        .ant-modal-footer {
            padding: 0 20px;
        }
    }
    .ant-modal-body {
        flex: 1;
        // overflow: auto;
    }
}

</style>
